@import "../../assets/scss/core/base";
@import "../../assets/scss/reset";

$jigsaw-slider: #{$jigsaw-prefix}-slider;

.#{$jigsaw-slider}-host {
    width: 100%;
    @include inline-block;
    padding: 0 6px;
    user-select: none;
    ::selection {
        background-color: #fff;
        color: #666;
    }
    &.#{$jigsaw-slider}-error {
        border: 1px solid $error-color;
    }
}

.#{$jigsaw-slider} {
    display: block;
    position: relative;
    height: 4px;
    border-radius: 4px;
    cursor: pointer;
    background-color: $border-color-split;
    user-select: none;

    transition: background-color 0.3s ease;

    &-with-marks {
        margin-bottom: 28px;
    }

    .#{$jigsaw-slider}-track {
        position: absolute;
        left: 0px;
        height: 4px;
        border-radius: $border-radius-base;
        background-color: mix($primary-color, #fff, 40%);
        z-index: $zindex-level-1;
        transition: background-color 0.3s ease;
    }

    &:hover {
        background-color: #e1e1e1;
        .#{$jigsaw-slider}-handle {
            border-color: $primary-color;
        }
    }

    &:hover {
        .#{$jigsaw-slider}-track {
            background-color: mix($primary-color, #fff, 80%);
        }
    }

    .#{$jigsaw-slider}-handle {
        position: absolute;
        margin-left: -7px;
        margin-top: -5px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        border: 2px solid mix($primary-color, #fff, 50%);
        background-color: $default-color;
        z-index: $zindex-level-2;

        transition: border-color 0.3s ease, transform .3s cubic-bezier(0.18, 0.89, 0.32, 1.28);

        &:hover {
            border-color: $primary-color;
            transform: scale(1.2);
            transform-origin: center center;
        }

        &:active {
            box-shadow: 0 0 0 2px rgba($primary-color, .2);
        }
    }

    .#{$jigsaw-slider}-mark {
        position: absolute;
        top: 10px;
        left: 0;
        width: 100%;
        height: 100%;
        font-size: $font-size-base;
        z-index: $zindex-level-3;

        .#{$jigsaw-slider}-mark-text {
            position: absolute;
            display: inline-block;
            vertical-align: middle;
            text-align: center;
            cursor: pointer;
            color: $text-color-secondary;

            &-active {
                color: $text-color;
            }
        }
    }

    .#{$jigsaw-slider}-step {
        position: absolute;
        width: 100%;
        height: 4px;
        background: transparent;
        z-index: $zindex-level-1;

        > .#{$jigsaw-slider}-dot {
            position: absolute;
            margin-left: -4px;
            width: 8px;
            height: 8px;
            border: 2px solid $border-color-split;
            background-color: $default-color;
            cursor: pointer;
            border-radius: 50%;
            vertical-align: middle;
            &:first-child {
                margin-left: -4px;
            }
            &:last-child {
                margin-left: -4px;
            }
            &-active {
                border-color: mix($primary-color, #fff, 50%);
            }
        }
    }

    &-disabled {
        background-color: $border-color-split !important;

        .#{$jigsaw-slider}-track {
            background-color: $disabled-color !important;
        }

        .#{$jigsaw-slider}-handle,
        .#{$jigsaw-slider}-dot {
            border-color: $disabled-color !important;
            background-color: $default-color;
            cursor: not-allowed;
            box-shadow: none;
        }

        .#{$jigsaw-slider}-handle:active {
            box-shadow: none;
        }

        .#{$jigsaw-slider}-masr-text,
        .#{$jigsaw-slider}-dot {
            cursor: not-allowed !important;
        }
    }

    &-vertical {
        height: 240px;
        width: auto;
        padding: 6px 0;
        .#{$jigsaw-slider} {
            width: 4px;
            height: 100%;
            border: 4px;

            .#{$jigsaw-slider}-track {
                width: 4px;
            }

            .#{$jigsaw-slider}-handle {
                margin-left: -5px;
                margin-bottom: -7px;
            }

            .#{$jigsaw-slider}-mark {
                top: 10px;
                left: 10px;
            }
            .#{$jigsaw-slider}-mark-text {
                white-space: nowrap;
            }

            .#{$jigsaw-slider}-step {
                width: 4px;
                height: 100%;
            }

            .#{$jigsaw-slider}-dot {
                top: auto;
                left: 2px;
                margin-bottom: -4px;
            }
        }
    }

}


